<!-- <script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import EventEmitter2 from "eventemitter2";
import * as MJPEGCANVAS from "./mjpegcanvasjs/build/mjpegcanvas";
// import { MJPEGCANVAS } from "./mjpegcanvas";
const width = 640;
const height = 480;
const canvas = ref<HTMLCanvasElement>();
let mjpeg: any;
onMounted(() => {
  mjpeg = new MJPEGCANVAS.Viewer({
    divID: canvas.value,
    host: "localhost",
    topic: "/wide_stereo/left/image_color",
    width: width,
    height: height,
    quality: 640,
    interval: 480
    // onFrame: (ctx: CanvasRenderingContext2D) => {
    //   // 在这里添加绘制到 canvas 上的其他内容
    // }
  });
});

onUnmounted(() => {
  mjpeg.stop();
});
</script>
<script src="http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
<template>
  {{ 11111111111 }}
  <canvas ref="canvas" :width="width" :height="height" />
</template>

<style scoped></style> -->
<script setup lang="ts">
import { reactive } from "vue";
const options = reactive({
  src: "http://127.0.0.1:8080/stream_viewer?topic=/usb_cam/image_raw", //视频源
  type: "m3u8" //视频类型
});
</script>
<template>
  <!-- <div>
    <vue3VideoPlay
      width="800px"
      title="冰河世纪"
      :src="options.src"
      :type="options.type"
      :autoPlay="false"
    />
  </div> -->
  <img src="api/stream?topic=/usb_cam/image_raw" />
</template>
